<template>
    <div class="video-analysis">
        <ModalTitle title="智能视频分析" />
        <div class="echart" ref="echarts"></div>
    </div>
</template>

<script>
// 智能视频分析
import ModalTitle from '@components/ModalTitle/Index.vue'
import { ZongHeZhiFaDB } from '@/api/zhangzi'
export default {
    components: { ModalTitle },
    data() {
        return {}
    },
    mounted() {
        this.getPreVideoData()
    },
    methods: {
        // 获取饼图数据
        async getPreVideoData() {
            const res = await ZongHeZhiFaDB.IntelligentVideoAnalyticsAPI()
            if (res.success) {
                let D = [{
                    value: res.data.smartDeviceCount || 0,
                    name: '已实现智能视频分析的路数',
                    itemStyle: {
                        color: '#00D1E4',
                    },
                }, {
                    value: res.data.deviceCount || 0,
                    name: '总视频路数',
                    itemStyle: {
                        color: '#019FFA',
                    },
                }]
                this.init(D)
            } else {
                this.$message.error(res.message)
            }
        },
        // 初始化实例
        init(D) {
            let dom = this.$refs.echarts
            let mycharts = echarts.init(dom)
            let m2R2Data = D;
            let option = {
                tooltip: {
                    trigger: 'item',
                },
                legend: {
                    // 是否横向展示
                    orient: 'circle',
                    bottom: 20,
                    left: 'center',
                    itemWidth: 12,
                    itemHeight: 5,
                    icon: 'circle',
                    textStyle: {
                        color: '#ffffff'
                    }
                },
                series: [
                    {
                        type: 'pie',
                        radius: ['0%', '40%'],
                        itemStyle: {
                            //图形样式
                            normal: {
                                borderRadius: 10,
                                borderColor: '#ffffff',
                                borderWidth: 1,
                            },
                        },
                        left: 0,
                        right:70,
                        label: {
                            formatter: function (params) {
                                return `{normal|${params.value}}\r\r\n\n{value|${params.data.name}}`
                            },
                            rich: {
                                normal: {
                                    fontSize: 16,
                                    align: "left"
                                },
                                value: {
                                    fontSize: 12,
                                    color: "#B0BBBC",
                                    align: "left"
                                }
                            }
                        },
                        data: m2R2Data,

                    },
                ],
            };
            option && mycharts.setOption(option)
        }
    },
}
</script>

<style lang="less" scoped>
.video-analysis {
    width: 100%;
    height: 45.8rem;

    .echart {
        width: 100%;
        height: calc(100% - 3.8rem - 1.5rem);
        margin-top: 1.5rem;
    }
}
</style>